<template>
  <div>
    <p>日均运费，发票折线图</p>
    <div id="freight" :style="{width: '100%', height: '300px'}" />
  </div>
</template>
<script>
import Vue from "vue";
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
export default {
  name: "Hello",
  props: ["message7"],
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  watch: {
    message7: function(newVal, oldVal) {
      let time = [];
      let fp = [];
      let yf = [];
      newVal.orderFee.map(function(value, index) {
        time.push(value.dateTime);
        fp.push(value.total);
      });
      newVal.invoiceFee.map(function(value, index) {
        yf.push(value.total);
      });
      this.drawLine(time, fp, yf);
    }
  },
  methods: {
    drawLine(t, f, y) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById("freight"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["发票金额", "运费"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: t
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "发票金额",
            type: "line",
            stack: "总量",
            data: f
          },
          {
            name: "运费",
            type: "line",
            stack: "总量",
            data: y
          }
        ]
      });
    }
  }
};
</script>
